<template>
  <div>
    <WorkOrderHeader flowType="yhjy"/>
    <div style="bottom: 64px;top: 80px;position: fixed;background-color: #faf9ff; z-index: 1000">
      <div class="yhjy" style="padding-top:12px; background-color: white; padding-bottom: 20px;">
        <table >
          <caption style="display: none">优化建议</caption>
          <tr>
            <th scope="col"> </th>
            <th scope="col"> </th>
          </tr>
          <tr>
            <td colspan="2"><span class="red-span">*</span>&nbsp;针对问题</td>

          </tr>
          <tr>
            <td colspan="2" class="tr-last-child">
              <select v-model="yhjy_form.question" style="width: 100%; height: 40px; font-size: 15px; padding-left: 10px; color: #cdcdcd;" >
                <option label="请选择问题" value="" disabled >请选择问题</option>
                <option label="页面" value="页面">页面</option>
                <option label="操作" value="操作">操作</option>
                <option label="功能" value="功能">功能</option>
                <option label="其他" value="其他">其他</option>
              </select>
            </td>
          </tr>

          <tr>
            <td colspan="2"><span class="red-span">*</span>&nbsp;建议描述</td>
          </tr>
          <tr>
            <td colspan="2">
              <textarea v-model="yhjy_form.content" maxlength="500" @blur="check()" placeholder="请输入您的建议描述"
               style="width: 95%;resize: none; height: 10em;padding-right: 4px; font-weight: normal;"></textarea>
              <br>
              <span class="el-form-item__error" v-if="contentError">建议描述不能为空</span>
            </td>
          </tr>
        </table>
      </div>
      <div class="user_seal_apply_footer" >
        <div class="seal_work-bts-cls">
          <button @click="optimization_submit()">
            提交
          </button>
          <button @click="backBtn()" style="border-color: gray; color: gray">
            取消
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WorkOrderHeader from '../components/home/workOrder/WorkOrderHeader'
import API from '../api/api-chat-list'
import Qs from 'qs'

export default {
  name: "Yhjy",
  components: {
    WorkOrderHeader,
  },
  data() {
    return {
        yhjy_form:{
          question:""
        },
        contentError: false
    }
  },
  methods: {
    check(){
      this.contentError = !this.yhjy_form.content
    },
    backBtn(){
       this.$router.back();
    },
    async optimization_submit(){
      if(!this.yhjy_form.question){
        this.setErrorMsg("请选择针对问题");
        return
      }

      const content = this.yhjy_form.content || "";
      if(content === ""){
        this.setErrorMsg("建议描述的内容不能为空");
        return
      }

      const length = content.length;
      if(length > 500){
        this.setErrorMsg("建议描述的内容不能超过500个字符");
        return
      }

      const addOptimize = await API.addOptimizeAdvise(Qs.stringify(this.yhjy_form));
      if (addOptimize.result === '1') {
        this.$toast.success("提交成功")
      } else {
        this.setErrorMsg(addOptimize.message);
      }

      this.yhjy_form = {};
      this.$router.back();
    },
    setErrorMsg(msg){
      this.$toast.fail(msg);
    },
  }
}
</script>
<style>
  .yhjy .red-span {
    color: red;
  }
  .yhjy .tr-last-child select {
    padding: 5px 1px;
    border-radius: 5px;
    border: 1px solid #e8e8e8;
    height: 30px;
    background-color: white;
  }
  .yhjy textarea {
    color: #606266;
    border: 1px solid #e8e8e8;
    border-radius: 5px;
  }

  .yhjy textarea::placeholder {
    text-indent: 10px;
    font-size: 15px;
    color: #cdcdcd;
    padding-top: 5px;
  }

  .yhjy td {
    font-size: 13px;
    padding: 6px 10px;
  }
  .yhjy tr > td:first-child {
    text-align: left;
    width: 25%;
    font-size: 1.1em;
    vertical-align: middle;
  }
  .yhjy hr {
    border: none;
    border-bottom: 1px solid #DaDaDa;
    height: 1px;
  }
  .yhjy .el-form-item__error {
    color: #F56C6C;
    font-size: 14px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
  }
  .user_seal_apply_footer {
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    z-index: 1000;
    height: 4em;
    box-shadow: 0 0 23px rgb(145 43 43 / 12%);
  }

  .user_seal_apply_footer  button {
    padding: 0.5em 1em;
    width: 60%;
    margin: 0.7em;
    background-color: #FFFFFF;
    border-radius: 5px;
    border: 1px solid #ED2439;
    color: #ED2439;
  }

  .user_seal_apply_footer .seal_work-bts-cls {
    display: flex;
    justify-content: center;
  }
</style>
